<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/testpaper/addtestpaper' }">试卷列表·组卷</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="trr">
                <!-- 第一部分 -->
                <div style="background-color: #fff;padding: 10px;border: 1px solid darkgray;box-shadow: 0px 0px 1px grey;border-radius: 5px;"
                    v-show="count == 0">
                    <el-descriptions v-loading="loading" title="组卷·基本数据" :column="2" border>
                        <el-descriptions-item label="试卷名" label-align="right" align="left" label-class-name="my-label"
                            class-name="my-content" width="150px" :span="2">
                            <el-input style="width: 100%;" v-model="name" placeholder="请输入题库名称" />
                        </el-descriptions-item>
                        <el-descriptions-item width="150px" label="总分" label-align="right" align="left">
                            <el-input-number @change="scores" style="width: 40vh;" v-model="score" :min="1" :max="999" />
                        </el-descriptions-item>
                        <el-descriptions-item width="150px" label="及格分" label-align="right" align="left">
                            <el-input-number :disabled="true" style="width: 40vh;" v-model="grades" :min="1" :max="999" />
                        </el-descriptions-item>
                        <el-descriptions-item label="标签" :span=2 label-align="right" width="150px" align="left">
                            <el-checkbox style="width: 7vh;" @change="(val) => check(val, item)"
                                v-for="(item, index) in checkList" :key="index" :label="item">
                                {{ item }}
                            </el-checkbox>
                        </el-descriptions-item>
                        <el-descriptions-item label="描述" :span=2 label-align="right" align="left">
                            <el-input v-model="explain" :rows="2" type="textarea" placeholder="题库描述" />
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <!-- 第二部分 -->
                <div style="background-color: #fff;padding: 10px;border: 1px solid darkgray;box-shadow: 0px 0px 1px grey;border-radius: 5px;"
                    v-show="count == 1">
                    <el-descriptions v-loading="loading" title="组卷·选择试题" :column="2" border>
                        <el-descriptions-item label="组卷方式" label-align="right" align="left" label-class-name="my-label"
                            class-name="my-content"  :span="1">
                            <el-radio-group v-model="radio" class="ml-4">
                                <el-radio label="1" size="large">人工</el-radio>
                                <el-radio label="2" size="large">随机</el-radio>
                            </el-radio-group>
                        </el-descriptions-item>
                        <el-descriptions-item  label="题目数量" label-align="right" align="left">
                            <el-input-number  v-model="num" :min="1" :max="99" />
                        </el-descriptions-item>
                        <el-descriptions-item  label="难度" label-align="right" align="left">
                            <el-rate v-model="lv" :min="1" :max="10" />
                        </el-descriptions-item>
                        <el-descriptions-item  label="操作" label-align="right" align="left">
                            <el-button type="primary" v-if="radio == '1'" @click="choose">选择/替换 试题</el-button>
                            <el-button type="primary" v-else-if="radio == '2'"
                                @click="dialogVisibles = true">随机出题</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="已经选试题" :span=2 label-align="right" align="left">
                            <el-table v-loading="loading" :data="ddd" height="43vh" max-height="43vh" 
                                 @selection-change="selectionAll" row-key="id">
                                <el-table-column type="index" width="60" label="序号" />
                                <el-table-column prop="content" label="题干"  show-overflow-tooltip />
                                <el-table-column label="题类" show-overflow-tooltip>
                                    <template #default="scope">
                                        <el-tag>
                                            {{ scope.row.type == 1 ? '选择题' : '多选题' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="lv" label="难度" />
                                <el-table-column label="标签">
                                    <template #default="scope">
                                        <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                            {{ item }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <!-- 第三部分 -->
                <div style="background-color: #fff;padding: 10px;border: 1px solid darkgray;box-shadow: 0px 0px 1px grey;border-radius: 5px;"
                    v-show="count == 2">
                    <el-descriptions v-loading="loading" title="组卷·设置分数" :column="2" border>
                        <template #extra>
                            <el-tag :type="fraction - score == 0 ? 'success' : 'danger'">当前已设置分数【{{ score }}】未设置分数
                                【{{ (fraction - score) }}】</el-tag>
                        </template>
                        <el-descriptions-item label="分数设置" label-align="right" align="left" label-class-name="my-label"
                            class-name="my-content" width="150px" :span="2">
                            <el-table v-loading="loading" :data="ddd" height="43vh" max-height="43vh" border
                                style="width: 100%" @selection-change="selectionAll" row-key="id">
                                <el-table-column type="index" width="60" label="序号" />
                                <el-table-column prop="content" label="题干" width="180" show-overflow-tooltip />
                                <el-table-column label="题类" width="180" show-overflow-tooltip>
                                    <template #default="scope">
                                        <el-tag>
                                            {{ scope.row.type == 1 ? '选择题' : '多选题' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="lv" label="难度" />
                                <el-table-column label="标签">
                                    <template #default="scope">
                                        <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                            {{ item }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="标签" :key="tablekey">
                                    <template #default="scope">
                                        <el-input-number style="width: 80%;" v-model="scope.row.score"
                                            controls-position="right" @change="inputChange($event, scope.row.score)"
                                            :min="1" :max="500">
                                        </el-input-number>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>

                <!-- 第四部分 -->
                <div style="background-color: #fff;padding: 2vh;border: 1px solid darkgray;box-shadow: 0px 0px 1px grey;border-radius: 5px;"
                    v-show="count == 3">
                    <el-descriptions v-loading="loading" title="组卷·最后确认" :column="2" border>
                        <el-descriptions-item label="试卷名" label-align="right" align="left" label-class-name="my-label"
                            class-name="my-content" width="150px" :span="1">
                            <el-tag>{{ name }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item width="150px" label="标签" label-align="right" align="left">
                            <el-tag v-for="item in labelss" :key="item">{{ item }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item width="150px" label="难度" label-align="right" align="left">
                            <el-tag>{{ lv }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item width="150px" label="总分" label-align="right" align="left">
                            <el-tag>{{ score }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item width="150px" label="及格分" label-align="right" align="left">
                            <el-tag>{{ grades }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item width="150px" label="题目数量" label-align="right" align="left">
                            <el-tag>{{ num }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="已经选试题" :span=2 label-align="right" align="left">
                            <el-table v-loading="loading" :data="ddd" height="43vh" max-height="43vh" border
                                style="width: 100%" @selection-change="selectionAll" row-key="id">
                                <el-table-column type="index" width="60" label="序号" />
                                <el-table-column prop="content" label="题干" width="180" show-overflow-tooltip />
                                <el-table-column label="题类" width="180" show-overflow-tooltip>
                                    <template #default="scope">
                                        <el-tag>
                                            {{ scope.row.type == 1 ? '选择题' : '多选题' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="lv" label="难度">
                                    <template #default="scope">
                                        <el-tag>
                                            {{ scope.row.lv }}星
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="标签">
                                    <template #default="scope">
                                        <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                            {{ item }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
                <div style="text-align: right;margin-top: 1vh;">
                    <el-button style="width: 10vh;" v-if="count >= 1" @click="count--" type="primary" plain>上一步</el-button>
                    <el-button style="width: 10vh;" v-if="count == 0"
                        :disabled="name == '' || labelss.length == 0 ? true : false" @click="count++"
                        type="primary">下一步</el-button>

                    <el-button style="width: 10vh;" v-if="count == 1"
                        :disabled="name == '' || ddd.length == 0 ? true : false" @click="count++"
                        type="primary">下一步</el-button>

                    <el-button style="width: 10vh;" v-if="count == 2" :disabled="fraction - score != 0 ? true : false"
                        @click="count++" type="primary">下一步</el-button>

                    <el-button style="width: 10vh;" v-if="count == 3" type="success" @click="AddTest">完成</el-button>

                </div>
            </div>

            <!-- 选择替换试题弹出框 -->
            <el-dialog v-model="dialogVisible" :show-close="true" style="width: 80%;margin-top: 1vw;">
                <template #header="{ titleId, titleClass }">
                    <div class="my-header">
                        <h4 :id="titleId" :class="titleClass" style="text-align: left;margin-top: 10px;">导入试题</h4>
                    </div>
                </template>
                <div class="tabs" style="margin: auto;margin-top: -3vw;padding: 2vh;">
                    <div class="grid-content">
                        <el-row>
                            <el-col :span="7">
                                <div>
                                    <el-select style="width: 100%;" @change="Questions" multiple v-model="Ques"
                                        placeholder="选择题库搜索">
                                        <el-option v-for="item in Question" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :span="9">
                                <div class="flex">
                                    <el-input size="large" style="width: 45vh;" @input="inpus" v-model="key"
                                        placeholder="请输入需要查询的试题" class="input-with-select">
                                        <template #append>
                                            <el-button>查询</el-button>
                                        </template>
                                    </el-input>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="flex">
                                    <el-select style="width: 100%;" @change="labels" multiple v-model="label"
                                        placeholder="选择题库搜索">
                                        <el-option v-for="item in checkList" :key="item" :label="item" :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="trrs" >
                        <el-table v-loading="loading" :data="tableDatass" height="43vh" max-height="43vh" border
                            style="width: 100%" @selection-change="selectionAll" row-key="id">
                            <el-table-column type="selection" width="55" :reserve-selection="true" />
                            <el-table-column type="index" width="60" label="序号" />
                            <el-table-column prop="content" label="题干" width="180" show-overflow-tooltip />
                            <el-table-column prop="lv" label="难度" />
                            <el-table-column prop="createTime" label="添加时间" width="150" />
                            <el-table-column prop="author" label="作者" />
                            <el-table-column label="标签">
                                <template #default="scope">
                                    <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                        {{ item }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="example-pagination-block" style="margin-top: 1vh;">
                            <el-row>
                                <el-col :span="10">
                                    <div>
                                        <el-pagination :page-size="obj.limit" :page-sizes="[5, 10, 20, 30]"
                                            layout="prev, pager, next,sizes," :total="obj.index"
                                            @size-change="handleSizeChange" @current-change="changes" />
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                </el-col>
                                <el-col :span="10">
                                    <text style="font-weight: 100;float: right;">应该选择【{{ num }}】道试题,实际选择【{{ selections.length
                                    }}】道试题</text>
                                </el-col>
                            </el-row>

                        </div>
                    </div>

                    <div class="grid-content">
                        <el-button style="width: 100%;" type="success" plain @click="Imports">确认选择</el-button>
                    </div>
                </div>

            </el-dialog>

            <!-- 随机出题弹出框 -->
            <el-dialog v-model="dialogVisibles" :show-close="true" style="width: 80%;">
                <template #header="{ titleId, titleClass }">
                    <div class="my-header">
                        <h4 :id="titleId" :class="titleClass" style="text-align: left;margin-top: 10px;">选择题目抽取试题</h4>
                    </div>
                </template>
                <div style=" margin: auto;margin-top: -3vh;">
                    <div class="grid-content">
                        <el-checkbox style="width: 7vh;" @change="(val) => checks(val, item)"
                            v-for="(item, index) in Question" :key="index" :label="item">
                            {{ item.name }}
                        </el-checkbox>
                    </div>
                    <div class="grid-content">
                        <el-button style="width: 100%;" type="success" plain @click="random">确认选择</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import type { TypeAddtestpaperDto } from '../../../type/testpaper'
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { GetLabels, GetQuestions, GetQuestionBanks, RandomQuestions, AddTestPaper } from '../../../api/question/question'
import { ElMessageBox, ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const router = useRouter();

        const data = reactive<TypeAddtestpaperDto>({
            loading: true,  // 加载屏 
            checkList: [],  //多选框
            explain: '',     //描述框  
            name: '',        //题库名
            parentid: '',    //父id
            lv: 1,           //等级
            labelss: [],       //标签
            disabled: true,    //是否禁用
            ddd: [],         //选择的题
            aaa: [],             //选择随机的出题库 
            num: 10,          //选择题目的数量
            count: 0,
            radio: '1',          //组卷模式
            score: 100,
            grades: 60,
            max: 0,
            min: 0,
            tablekey: false,
            fraction: 0,
            questions:[],

            // 随机出题的对话框
            dialogVisibles: false,

            // 对话框
            dialogVisible: false,
            tableDatass: [],     //选择替换试题表格数据
            Question: [],        //搜索框题库列表
            Ques: [],            //题库选择数据
            key: '',             //搜索框值
            label: [],           //标签文本框值
            selections: [],       //选择的试题
            obj: {
                page: 1,
                limit: 10,
                index: 0
            }
        })

        const events = {
            goBack() {
                window.history.go(-1)
            },

            //确认组卷
            AddTest() {
                data.loading = true
                var nc = 0
                data.ddd.forEach((na: any) => {
                    data.questions.push({
                        id: na.id,
                        score: na.score
                    })
                    nc = Math.max(na.type)
                })
                AddTestPaper({
                    count: data.num,
                    explain: data.explain,
                    isCheck: nc == 1 ? 0 : 1,
                    labels: data.labelss,
                    lv: data.lv,
                    mode: data.radio,
                    name: data.name,
                    passScore: data.grades,
                    totalScore: data.score,
                    questions: data.questions
                }).then((res: any) => {
                    if (res.result == 0) {
                        ElNotification({
                            title: '组卷成功',
                            type: 'success',
                        })
                        data.loading = false
                        router.push("/exam/testpaper")
                    } else {
                        ElNotification({
                            title: '组卷失败',
                            type: 'error',
                        })
                    }
                })
            },

            // 调整及格分
            scores() {
                data.grades = Math.floor(data.score * 0.6)
                data.fraction = data.score
            },

            choose() {
                data.dialogVisible = true
                // data.selections=[]
            },

            //试题分数设置
            inputChange(e: any, val: any) {
                val = e
                // data.tablekey = !data.tablekey
                data.score = 0
                data.ddd.forEach((na: any) => {
                    data.score += na.score
                })
            },

            //题库搜索框选择改变时触发
            Questions(val: any) {
                data.Ques = val
                data.loading = true
                events.bind()
            },

            // input搜索框改变时触发
            inpus() {
                data.loading = true
                events.bind()
            },

            // 标签搜索框改变时触发
            labels(val: any) {
                data.label = val
                data.loading = true
                events.bind()
            },

            // 确认选择试题
            Imports() {
                if (data.num == data.selections.length) {
                    ElMessageBox.confirm('确认要选择这些试题嘛！, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        data.fraction = data.score
                        data.ddd = data.selections
                        data.ddd.forEach((na: any) => {
                            data.lv += na.lv
                        })
                        data.lv = Math.floor(data.lv / data.num)
                        data.dialogVisible = false
                    })
                } else {
                    alert("请重新选择试题,数量不等对")
                }


            },

            // 确认随试题
            random() {
                data.loading=true
                data.dialogVisibles = false
                RandomQuestions({
                    count: data.num,
                    minLv: data.num,
                    maxLv: data.max,
                    banks: [data.aaa.join(",")]
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.loading=false
                        data.ddd = res.data.data
                        data.fraction = data.score
                        setTimeout(res.data.data.forEach((na: any) => {
                            data.lv += na.lv
                            data.max += na.lv

                            var nc = 0
                            data.ddd.forEach((na: any, index: any) => {
                                nc += na.lv
                                if (index == data.ddd.length - 1) {
                                    var a = Math.trunc(data.score / data.ddd.length)
                                    na.score = data.score - (a * (data.ddd.length - 1))
                                } else {
                                    na.score = Math.trunc(data.score / data.ddd.length)
                                }
                            })
                        }), 10)
                        data.lv = Math.floor(data.lv / data.num)
                    }
                })
            },

            //查询题目
            bind() {
                GetQuestions({
                    page: data.obj.page,
                    limit: data.obj.limit,
                    key: data.key,
                    banks: data.Ques.join(","),
                    labels: data.label.join(",")
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.tableDatass = res.data.data
                        data.obj.index = res.data.total
                        data.loading = false
                    }
                })
            },

            //分页每一页条数
            handleSizeChange(val: any) {
                data.obj.limit = val
                events.bind()
            },

            // page 改变时触发
            changes(val: any) {
                data.loading = true
                data.obj.page = val
                events.bind()
            },

            // 多选
            selectionAll(selection: any) {
                data.selections = selection
                var nc = 0
                data.selections.forEach((na: any, index: any) => {
                    nc += na.lv
                    if (index == data.selections.length - 1) {
                        var a = Math.trunc(data.score / data.selections.length)
                        na.score = data.score - (a * (data.selections.length - 1))
                    } else {
                        na.score = Math.trunc(data.score / data.selections.length)
                    }
                })
            },

            // 标签事件
            check(val: any, item: any) {
                if (val == false) {
                    data.labelss.splice(item, 1)
                } else {
                    data.labelss.push(item)
                }
            },

            // 随机出题选择题库
            checks(val: any, item: any) {
                if (val == false) {
                    data.aaa.splice(item.id, 1)
                } else {
                    data.aaa.push(item.id)
                }
            },

            // 获取标签
            GetLabel() {
                GetLabels({}).then((res: any) => {
                    if (res.result == 0) {
                        data.checkList = res.data
                        data.loading = false
                    }
                })
            }

        }

        onMounted(() => {
            events.GetLabel()
            events.bind()

            // 获取题库
            GetQuestionBanks({
                page: 1,
                limit: 999,
                key: '',
                isPublish: 1
            }).then((res: any) => {
                if (res.result == 0) {
                    data.Question = res.data.data
                    console.log(res, '题库列表000000000')
                }
            })
        })



        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
.tab {
    /* background-color: rgb(239, 240, 242); */
    padding: 1vh;
    border-radius: 5px;
    margin-top:-1vh ;
}

.tabs {
    margin-top: 2vh;
    background-color: rgb(239, 240, 242);
    border: 1px solid darkgray;
    box-shadow: 0px 0px 2px rgb(188, 185, 185);
    border-radius: 5px;
}

/* 按钮样式 */
.grid-content {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 95%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 1px grey;
}

.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    height: 75vh;
    padding: 10px;
    width: 99%;
    background-color: rgb(251, 251, 251);
    box-shadow: 0px 0px 2px grey;
}

.trrs {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    width: 95%;
    background-color: #f4f4f5;;
    border: 1px solid darkgray;
}  
</style>
